<template>
  <div class="tag-home" :style="{ 'min-height': siteHomeHeight + 'px' }">
    <div class="list-box">
      <div class="list-content">
        <div class="title">
          {{ list[selectIndex].name }}
          <span>{{ list[selectIndex].ename }}</span>
        </div>
        <div class="clearfix">
          <div class="selector">
            <ul>
              <li
                v-for="(item, index) in list"
                :key="index"
                :class="{ active: index === selectIndex }"
                @mousemove="selectIndex = index"
              >
                <div>
                  <img src="~@/assets/img/home-icon.png" />
                  {{ '0' + (index + 1) }}
                  <span class="divider"></span>
                </div>
                <div class="selector-name">{{ item.name }}</div>
              </li>
            </ul>
          </div>
          <div class="content">
            <ul>
              <li v-for="(item, index) in list[selectIndex].content" :key="index">
                <span @click="handleClick(item)">
                  <span class="icon"><img :src="item.icon"/></span>
                  <span class="text">{{ item.name }}</span>
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="wave">
        <div class="wave-bg"></div>
      </div>
    </div>
    <div class="bulletin-box">
      <div class="alient">
        <img src="~@/assets/img/alient.png" />
      </div>
      <el-row>
        <el-col :span="12">
          <div class="count">
            <el-row>
              <el-col :span="8">
                <span class="title total">标签总数</span>
                <div class="num">
                  <span @click="$router.push({ name: 'tagInfo', query: { type: 'Total' } })">
                    {{ tagCount }}
                  </span>
                </div>
              </el-col>
              <el-col :span="8">
                <span class="title add">本月新增</span>
                <div class="num">
                  <span @click="$router.push({ name: 'tagInfo', query: { type: 'MonthAdd' } })">
                    {{ tagMonthAdd }}
                  </span>
                </div>
              </el-col>
              <el-col :span="8">
                <span class="title off">本月下线</span>
                <div class="num">
                  <span @click="$router.push({ name: 'tagInfo', query: { type: 'MonthOff' } })">
                    {{ tagMonthOff }}
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="bulletin-item first">
            <template v-if="bulletin[0]">
              <div class="bulletin-title">{{ bulletin[0].bulletinTitle }}</div>
              <p class="tag-scrollbar">{{ bulletin[0].bulletinContent }}</p>
            </template>
            <div class="no-record" v-else>暂无内容</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="bulletin-item last">
            <template v-if="bulletin[1]">
              <div class="bulletin-title">{{ bulletin[1].bulletinTitle }}</div>
              <p class="tag-scrollbar">{{ bulletin[1].bulletinContent }}</p>
            </template>
            <div class="no-record" v-else>暂无内容</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagCount: 0,
      tagMonthAdd: 0,
      tagMonthOff: 0,
      bulletin: [],
      selectIndex: 0,
      list: [
        {
          name: '标签创建',
          ename: 'Tag Creation',
          content: [
            {
              name: '标签需求',
              ename: 'require',
              icon: require('../../assets/img/require.png'),
              permission: 'ast:astTagRequireManager:view'
            },
            {
              name: '标签注册',
              ename: 'register',
              icon: require('../../assets/img/register.png'),
              permission: 'ast:astTagRegister:view'
            },
            {
              name: '标签工厂',
              ename: 'devired',
              icon: require('../../assets/img/market.png'),
              permission: 'der:derTagcalculation:view'
            }
          ]
        },
        {
          name: '标签管理',
          ename: 'Tag Management',
          content: [
            {
              name: '标签信息管理',
              ename: 'information',
              icon: require('../../assets/img/information.png'),
              permission: 'ast:astTag:view,ast:astTagModifyRecord:view'
            },
            {
              name: '标签体系管理',
              ename: 'catalog',
              icon: require('../../assets/img/catalog.png'),
              permission: 'dcl:dclAssetCatalog:view'
            },
            {
              name: '标签枚举值管理',
              ename: 'metadata',
              icon: require('../../assets/img/monitor.png'),
              permission: 'ast:astTagEnumVal:view'
            }
          ]
        },
        {
          name: '标签服务',
          ename: 'Tag Service',
          content: [
            {
              name: '标签超市',
              ename: 'market',
              icon: require('../../assets/img/market.png'),
              permission: 'front:page:market'
            },
            {
              name: '客群画像',
              ename: 'factory',
              icon: require('../../assets/img/factory.png'),
              permission: 'factory:tagFactory:view'
            },
            {
              name: '单用户画像',
              ename: 'portrait',
              icon: require('../../assets/img/require.png'),
              permission: 'ast:userPortrait:view'
            }
          ]
        }
      ]
    }
  },
  computed: {
    siteHomeHeight: {
      get() {
        return this.$store.state.common.documentClientHeight >= 650
          ? this.$store.state.common.documentClientHeight
          : 650
      }
    }
  },
  created() {
    this.getCounts()
    this.getBulletin()
  },
  methods: {
    handleClick(item) {
      if (!item.ename) return
      if (item.permission && !this.$auth(item.permission)) {
        this.$message.info(`没有查看${item.name}的权限，请联系管理员！`)
        return
      }
      this.$blank(item.ename)
    },
    getCounts() {
      this.$ajax({
        url: this.$ajax.setUrl('ast/astDataAsset/tagKpi'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.numberGrow(data.data.tagCount, this.tagCount, 'tagCount')
          this.numberGrow(data.data.tagMonthAdd, this.tagMonthAdd, 'tagMonthAdd')
          this.numberGrow(data.data.tagMonthOff, this.tagMonthOff, 'tagMonthOff')
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    numberGrow(newvalue, oldvalue, target) {
      let _this = this
      let step = ((newvalue - oldvalue) * 10) / 500
      let current = 0
      let start = 0
      let t = setInterval(function() {
        start += step
        if (start > newvalue) {
          clearInterval(t)
          start = newvalue
          t = null
        }
        if (current === start) {
          return
        }
        current = start
        _this[target] = Math.round(current)
      }, 10)
    },
    getBulletin() {
      this.$ajax({
        url: this.$ajax.setUrl('sys/sysBulletinInfo/currentUserBulletin'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.bulletin = data.data.slice(0, 2)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tag-home {
  width: 100%;
  background: url(~@/assets/img/home_bg.jpg) center center no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  .list-box {
    margin-top: 20px;
    position: relative;
    .list-content {
      width: 1080px;
      margin: 120px auto 0 auto;
      background: url(~@/assets/img/list_bg.gif) right top no-repeat;
      background-size: 600px auto;
      .title {
        font-size: 30px;
        color: #b9c7dd;
        margin-bottom: 30px;
        span {
          display: inline-block;
          margin-left: 20px;
          color: #6279ad;
        }
      }
      .selector {
        float: left;
        position: relative;
        &:after {
          width: 1px;
          content: '';
          background-color: #76e0f1;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          transform: scaleX(0.3);
        }
        li {
          font-size: 18px;
          width: 120px;
          vertical-align: middle;
          color: #32849b;
          cursor: pointer;
          position: relative;
          &.active {
            font-size: 22px;
            color: #76e0f1;
            &:after {
              width: 4px;
              content: '';
              background-color: #76e0f1;
              position: absolute;
              top: 0;
              right: -2px;
              bottom: 0;
            }
            img {
              opacity: 1;
            }
          }
          & + li {
            margin-top: 80px;
          }
          &:hover {
            img {
              transform: rotate(180deg);
            }
          }
          img {
            vertical-align: text-top;
            margin-right: 5px;
            opacity: 0.3;
            transition: all linear 0.3s;
          }
          .divider {
            display: inline-block;
            height: 30px;
            border-left: 1px solid #76e0f1;
            vertical-align: middle;
            margin-left: 10px;
            transform: rotate(15deg);
          }
          .selector-name {
            margin-top: 10px;
          }
        }
      }
      .content {
        float: left;
        color: #76e0f1;
        font-size: 18px;
        vertical-align: middle;
        .icon {
          display: inline-block;
          width: 120px;
          height: 120px;
          margin-top: -20px;
          margin-left: 20px;
          vertical-align: middle;
          text-align: center;
          line-height: 120px;
          position: relative;
          &::before {
            display: block;
            width: 100%;
            height: 100%;
            content: '';
            background: url(~@/assets/img/home_item_bg.png) center center no-repeat;
            background-size: 100%;
            position: absolute;
            transition: all linear 0.3s;
          }
        }
        li {
          & + li {
            margin-top: 35px;
          }
          span {
            display: inline-block;
            cursor: pointer;
            &.text {
              transform: translateY(-5px);
            }
          }
          .text {
            transition: all linear 0.3s;
          }
          &:hover {
            .text {
              font-size: 25px;
            }
            .icon:before {
              transform: rotate(180deg);
            }
          }
        }
      }
    }
  }
  .wave {
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: -200px;
    left: 0;
    overflow: hidden;
    .wave-bg {
      width: 200%;
      height: 100%;
      background: url(~@/assets/img/bulletin_bg.png) left top repeat-x;
      background-size: auto 100%;
      position: absolute;
      animation: wave linear infinite 50s;
    }
    @keyframes wave {
      from {
        left: 0;
      }
      to {
        left: -100%;
      }
    }
  }
  .bulletin-box {
    width: 1080px;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    bottom: 100px;
    margin-left: -540px;
    border: 5px solid rgba(#fff, 0.1);
    .alient {
      position: absolute;
      top: 0;
      right: 0;
      transform: translateY(-90%);
      img {
        width: 150px;
      }
    }
    .count {
      padding: 30px 0;
      background-color: #11235b;
      text-align: center;
      position: relative;
      overflow: hidden;
      &:before,
      &:after {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        content: '';
        box-shadow: 2px 2px 20px #02edfe;
        position: absolute;
        top: 50%;
        margin-top: -25px;
      }
      &:before {
        left: -50px;
      }
      &:after {
        right: -50px;
      }
      .title {
        display: inline-block;
        font-size: 18px;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        border-radius: 15px;
        &.total {
          background: linear-gradient(to right, #0971b5, #01add8);
        }
        &.add {
          background: linear-gradient(to right, #5450f2, #6e22e2);
        }
        &.off {
          background: linear-gradient(to right, #14b1b5, #02cec0);
        }
      }
      .num {
        font-size: 25px;
        font-weight: bold;
        color: #02edfe;
        margin-top: 20px;
        span {
          cursor: pointer;
        }
      }
    }
    .bulletin-item {
      height: 138px;
      padding: 20px;
      color: #fff;
      &.first {
        background-color: #0b1b40;
      }
      &.last {
        background-color: #25242a;
      }
      .bulletin-title {
        font-size: 16px;
        margin-bottom: 10px;
        text-align: center;
        color: #88c5db;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      p {
        height: 70px;
        overflow-y: auto;
      }
      .no-record {
        font-size: 20px;
        font-weight: bold;
        height: 100%;
        text-align: center;
        line-height: 98px;
      }
    }
  }
}
</style>
